<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery 特效</title>
    <meta content="Shoto 网页 Copy" name="Description">
    <meta content="codester" name="Keywords">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./jqtx.css">
</head>
<body>
<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <div class="span3">
                <a href="#texiao">基本特效</a>
            </div>
            <div class="span3">
                <a href="#ding">自定义</a>
            </div>
            <div class="span3">
                <a href="#jian">渐变</a>
            </div>
            <div class="span3">
                <a href="#hua">滑动</a>
            </div>
        </div>
    </div>
</div>
<div id="texiao">
    <div  class="container">
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #008bf8;" />
        </div>
        <div>
            <h1>基本特效</h1>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>hide</h2>
        <p>隐藏匹配的元素</p>
        <div class="row">
            <div class="span6">
                <div class="za">
                    <p><strong>.hide( [duration ] [, complete ] )</strong></p>
                    <p>duration (默认: 400) 类型: Number or String</p>
                    <p>一个字符串或者数字决定动画将运行多久。</p>
                    <p>complete 类型: Function()</p>
                    <p>在动画完成时执行的函数。</p>
                    <p><strong>.hide( options )</strong></p>
                    <p>options 类型: PlainObject</p>
                    <div>
                        <p>一组包含动画选项的值的集合。 支持的选项:</p>
                        <img src="./img/图片1.png" />
                        <img src="./img/图片2.png" />
                    </div>
                    <p>点击链接会隐藏所有段落。例子如下：</p>
                    <img src="./img/图片5.png" />
                    <p>点击后图中Demo下面文字隐藏</p>
                </div>
            </div>
            <div class="span6">
                <p><strong>.hide( [duration ] [, easing ] [, complete ] )</strong></p>
                <p>duration (默认: 400) 类型: Number or String</p>
                <p> 一个字符串或者数字决定动画将运行多久。</p>
                <p>easing (默认: swing) 类型: String</p>
                <p>一个字符串，表示过渡使用哪种缓动函数。</p>
                <p>（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）</p>
                <p>complete 类型: Function()</p>
                <p>在动画完成时执行的函数。</p>
                <p>如果没有参数，.hide()方法是最简单的方法来隐藏一个元素：</p>
                <img src="./img/图片3.png" />
                <p>我们可以给任何元素做动画，比如一个简单的图片：</p>
                <img src="./img/图片4.png" />
                <div>
                    <p>快速隐藏所有的 span 元素，用时 200 毫秒。一个结束后立即开始下一个</p>
                    <img src="./img/图片9.png" />
                </div>
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>show</h2>
        <p>显示匹配的元素</p>
        <div class="row">
            <div class="span6">
                <p><strong>.show( [duration ] [, complete ] )</strong></p>
                <p>duration (默认: 400) 类型: Number or String</p>
                <p>一个字符串或者数字决定动画将运行多久。</p>
                <p>complete 类型: Function()</p>
                <p>在动画完成时执行的函数。</p>
                <p><strong>.show( options )</strong></p>
                <p>options类型: PlainObject</p>
                <p>一组包含动画选项的值的集合。 支持的选项:</p>
                <img src="./img/图片11.png" />
                <img src="./img/图片12.png" />
                <img src="./img/图片16.png" />
            </div>
            <div class="span6">
                <p><strong>.show( [duration ] [, easing ] [, complete ] )</strong></p>
                <p>duration (默认: 400)类型: Number or String</p>
                <p>一个字符串或者数字决定动画将运行多久。</p>
                <p>easing (默认: swing)类型: String</p>
                <p>一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，
                    其他可以使用相关的插件）
                </p>
                <p>complete类型: Function()</p>
                <p>在动画完成时执行的函数。</p>
                <p>如果没有参数，.hide()方法是最简单的方法来隐藏一个元素：</p>
                <img src="./img/图片13.png" />
                <p>我们可以给任何元素做动画，比如一个简单的图片：</p>
                <img src="./img/图片14.png" />
                <img src="./img/图片15.png" />
            </div>

        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>toggl</h2>
        <p>显示或隐藏匹配元素</p>
        <div class="row">
            <div class="span6">
                <div>
                    <p><strong>.toggle( [duration ] [, complete ] )</strong></p>
                    <p>duration (默认: 400)类型: Number or String</p>
                    <p>一个字符串或者数字决定动画将运行多久。</p>
                    <p>complete类型: Function()</p>
                    <p>在动画完成时执行的函数。</p>
                    <p><strong>.toggle( options )</strong></p>
                    <p>options类型: PlainObject</p>
                </div>
                <div>
                    <p>一组包含动画选项的值的集合。 支持的选项:</p>
                    <img src="./img/图片17.png" />
                    <img src="./img/图片18.png" />
                    <img src="./img/图片21.png" />
                </div>
            </div>
            <div class="span6">
                <div>
                    <p><strong>.toggle( [duration ] [, easing ] [, complete ] )</strong></p>
                    <p>duration (默认: 400)类型: Number or String</p>
                    <p>一个字符串或者数字决定动画将运行多久。</p>
                    <p>easing (默认: swing)类型: String</p>
                    <p>一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"
                        ，其他可以使用相关的插件）
                    </p>
                    <p>complete类型: Function()</p>
                    <p>在动画完成时执行的函数。</p>
                    <p><strong>.toggle( showOrHide )</strong></p>
                    <p>showOrHide类型: Boolean</p>
                    <p>一个布尔值，指示元素是显示或隐藏</p>
                    <img src="./img/图片6.png" />
                    <p><strong>showOrHide</strong>类型: Boolean</p>
                    <p>一个布尔值，指示元素是显示或隐藏。</p>
                    <img src="./img/图片7.png" />
                    <p>如果没有参数，.toggle()方法是最简单的方法来切换一个元素可见性</p>
                    <img src="./img/图片19.png" />
                    <img src="./img/图片20.png" />
                </div>
            </div>
        </div>
    </div>
</div>
<div id="ding">
    <div class="container">
        <div>
            <hr style="height:1px;border:none;border-top:1px solid  #008bf8;" />
        </div>
        <div>
            <h1>自定义</h1>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.animate()：</h2>
        <p>根据一组 CSS 属性，执行自定义动画。</p>
        <div class="row">
            <div class="span6">
                <img src="./img/图片23.png" />
                <img src="./img/图片24.png" />
                <img src="./img/图片25.png" />
            </div>
            <div class="span6">
                <p>.animate()方法允许我们在任意的数值的CSS属性上创建动画。唯一必要的属性就是一组
                    CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，
                    除了属性范围做了更多限制。
                </p><br/>
                <p><strong>动画属性和值</strong></p>
                <p>所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基
                    本的jQuery功能。
                </p><br/>
                <p>除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。
                    这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。
                    为了使用jQuery内置的切换状态跟踪，'toggle'关键字必须在动画开始前给定属性值。
                </p><br/>
                <p><strong>注：</strong>不同于动画的简便方法，比如.slideDown() 和 .fadeIn(),.animate()
                    方法不会影响隐藏元素的可见性部分的效果。例如，给定$('someElement').hide()
                    .animate({height:'20px'}, 500)，动画将执行，但该元素将保持隐藏。
                </p><br/>
                <img src="./img/图片26.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.clearQueue()：</h2>
        <p>从列队中移除所有未执行的项。</p>
        <div class="row">
            <div class="span6">
                <img src="./img/图片29.png" />
                <p>当.clearQueue()方法被访问的时候，所有在这个列队中未执行的函数将被移除 。
                    当不使用参数的时候，.clearQueue()会从标准的动画队列fx中移除剩下的函数。
                    这个方法类似.stop(true)。然而.stop()方法只适用在动画中。.clearQueue()
                    还可以用来移除用.queue()方法添加到普通jQuery列表的任何函数。
                </p>
            </div>
            <div class="span6">
                <img src="./img/图片30.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.delay()：</h2>
        <p>设置一个延时来推迟执行队列中后续的项。</p>
        <div class="row">
            <div class="span6">
                <img src="./img/图片31.png" />
                <p>
                    .delay()方法允许将队列中的函数延时执行。
                    它既可以推迟动画队列中函数的执行，也可以用于自定义队列。
                    只有队列中连续的事件会延迟;。
                </p><br/>
                <p><strong>注：</strong>.delay()是用来在jQuery动画效果和类似队列中是最好的。但是，由于其本身的限制，
                    比如无法取消延时——.delay()，它不是JavaScript的原生 setTimeout函数的替代品，
                    这可能是更适合某些使用情况。
                </p>
            </div>
            <div class="span6">
                <img src="./img/图片32.png" />
                <p>效果如下：</p>
                <img src="./img/图片33.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.dequeue()：</h2>
        <p>执行匹配元素队列的下一个函数。</p>
        <div class="row">
            <div class="span6">
                <img src="./img/图片34.png" />
                <p>当.dequeue()被调用的时候，列队中的下一个函数将从这个列队中被移除，
                    然后再执行。这个执行的函数中也应当直接或间接的包含 .dequeue()语句，
                    这样才能继续执行队列中的其它函数，所以,这个序列可以继续。
                </p>
            </div>
            <div class="span6">
                <img src="./img/图片35.png" />
                <p>效果如下：</p>
                <img src="./img/图片36.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.finish()：</h2>
        <p>停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。</p>
        <div class="row">
            <div class="span4">
                <img src="./img/图片37.png" />
                <p>当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画
                    （如果有的话），并且他们的CSS属性设置为它们的目标值（注：就是所有动画的目标值）。
                    所有排队的动画将被删除。
                </p><br/>
                <p>.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，
                    并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的
                    动画的CSS属性跳转到他们的最终值。
                </p><br/>
                <p><strong>注：</strong>动画可能因为全局的$.fx.off 属性设置为 true而停止。当这样做时，
                    所有动画方法将立即设置元素的css属性为其最终调用后的状态，而不是显示动画效果。
                </p>
            </div>
            <div class="span8">
                <img src="./img/图片8.png" />
                <p>效果图如下：</p>
                <img src="./img/图片10.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>jQuery.fx.interval ：</h2>
        <p>该动画的频率（以毫秒为单位）。</p>
        <div class="row">
            <div class="span6">
                <p>这个属性可以设置动画每秒运行帧数。默认是13毫秒。
                    该属性值越小，在速度较快的浏览器中（例如，Chrome），
                    动画执行的越流畅，但是会影响程序的性能并且占用更多的 CPU 资源。
                </p><br/>
                <p>jQuery中，该属性是全局性的，因此在没有动画正在运行或停止所有动画时，
                    此属性的变化才能生效。
                </p>
            </div>
            <div class="span6">
                <img src="./img/图片38.png" />
                <p>效果图如下：</p>
                <img src="./img/图片39.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>jQuery.fx.off：</h2>
        <p>全局的禁用所有动画。</p>
        <div class="row">
            <div class="span6">
                <p>当这个属性设置为true的时候，调用时所有动画方法将立即设置元素为他们的最终状态，
                    而不是显示效果。有时候确实有必要这样做：
                </p><br/>
                <p>jQuery是被用在低资源设备。</p><br/>
                <p>动画使用户遇到可访问性问题。</p><br/>
                <p>动画可以通过设置这个属性为false重新打开.</p>
            </div>
            <div class="span6">
                <img src="./img/图片40.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.queue()：</h2>
        <p>显示在匹配的元素上的已经执行的函数列队。在匹配元素上操作已经附加函数的列表。</p>
        <div class="row">
            <div class="span6">
                <img src="./img/图片42.png" />
                <img src="./img2/图片43.png" />
            </div>
            <div class="span6">
                <img src="./img/图片44.png" />
                <img src="./img/图片45.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.stop()：</h2>
        <p>停止匹配元素当前正在运行的动画。</p>
        <div class="row">
            <div class="span6">
                <img src="./img/图片46.png" />
                <p><strong>注：</strong>可以通过设置属性$.fx.off为true停止全局的动画 。当这样做，
                    所有动画方法将立即设置元素的最终状态，而不是所谓的显示效果。
                </p>
            </div>
            <div class="span6">
                <img src="./img/图片47.png" />
            </div>
        </div>
    </div>
</div>
<div id="jian">
    <div  class="container">
        <div>
            <hr style="height:1px;border:none;border-top:1px solid  #008bf8;" />
        </div>
        <div>
            <h1>渐变</h1>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.fadeIn/Out/Toggle()
        </h2>
        <p>渐显/渐淡/切换</p>
        <div class="row">
            <div class="span6">
                <p><strong>.fadeIn/Out/Toggle( [duration ] [, complete ] )</strong></p>
                <p>渐显/渐淡/切换([持续] [完成])</p><br/>
                <p>duration (默认: 400)类型: Number or String</p>
                <p>一个字符串或者数字决定动画将运行多久。</p><br/>
                <p>complete类型: Function()</p>
                <p>在动画完成时执行的函数。</p> <br/>
                <p><strong>.fadeIn/Out/Toggle( options )</strong></p>
                <p>options类型: PlainObject</p>
                <p>一组包含动画选项的值的集合。</p><br/>
                <p><strong>.fadeIn/Out/Toggle( options )</strong></p>
                <p>options类型: PlainObject</p>
                <p>一组包含动画选项的值的集合。</p><br/>
                <p><strong>.fadeIn/Out( [duration ] [, easing ] [, complete ] )</strong></p>
                <p>duration  类型: Number or String</p>
                <p>一个字符串或者数字决定动画将运行多久。</p><br/>
                <p>easing类型: String</p>
                <p>一个字符串，表示过渡使用哪种缓动函数。</p><br/>
                <p>complete类型: Function()</p>
                <p>在动画完成时执行的函数。</p><br/>
                <p><strong>注意：</strong>duration（延时时间）参数是以毫秒为单位的，数值越大，动画越慢，
                    不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，
                    或者这个duration参数被省略，那么默认使用400毫秒的延时
                </p>
                <p><strong>渐显实例：</strong></p>
                <img src="./img/图片48.png" />
                <img src="./img/图片49.png" />
                <p><strong>切换实例：</strong></p>
                <img src="./img/图片52.png" />
            </div>
            <div class="span6">
                <p><strong>options 支持选项.</strong></p>
                <p>duration类型：Number or String</p>
                <p>一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串
                    ("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
                </p><br/>
                <p>easing类型：String</p>
                <p>一个字符串，表示过渡使用哪种缓动函数。</p><br/>
                <p>queue类型：Boolean or String</p>
                <p>一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。</p><br/>
                <p>specialEasing   类型：PlainObject</p>
                <p>一组一个或多个通过相应的参数和相对简单函数定义的CSS属性 。</p><br/>
                <p>step  类型：Function( Number now, Tween tween )</p>
                <p>每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween
                    对象提供了一个机会来改变设置中得属性值。
                </p><br/>
                <p>progress 类型： Function( Promise animation, Number progress,
                    Number remainingMs )
                </p>
                <p>每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。</p><br/>
                <p>complete 类型：Function()</p>
                <p>在动画完成时执行的函数。</p><br/>
                <p>done类型：Function( Promise animation, Boolean jumpedToEnd )</p>
                <p>在动画完成时执行的函数。 (他的Promise对象状态已完成).</p><br/>
                <p>fail类型：Function( Promise animation, Boolean jumpedToEnd )</p>
                <p>动画失败完成时执行的函数(他的Promise对象状态未完成)。</p><br/>
                <p>always类型：Function( Promise animation, Boolean jumpedToEnd )</p>
                <p>在动画完成或未完成情况下停止时执行的函数(他的Promise对象状态已完成或未完成)。</p><br/>
                <p><strong>渐淡实例：</strong></p>
                <img src="./img/图片50.png" />
                <img src="./img/图片51.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.fadeTo()：</h2>
        <p>调整匹配元素透明度</p>
        <div class="row">
            <div class="span6">
                <p><strong>.fadeTo( duration, opacity [, complete ] )</strong></p>
                <p>褪变成(时间，不透明度[完成])</p><br/>
                <p>duration 类型: String,Number</p>
                <p>一个字符串或者数字决定动画将运行多久。</p><br/>
                <p>opacity 类型: Number</p>
                <p>0和1之间的数字表示目标元素的不透明度。</p><br/>
                <p>complete 类型: Function()</p>
                <p>在动画完成时执行的函数。</p><br/>
                <p>easing  类型: String</p>
                <p>一个字符串，表示动画过渡使用哪种缓动函数。</p><br/>
            </div>
            <div class="span6">
                <p>透明渐变0.33示例</p>
                <img src="./img/图片53.png" />
            </div>
        </div>
    </div>
</div>
<div id="hua">
    <div  class="container">
        <div>
            <hr style="height:1px;border:none;border-top:1px solid  #008bf8;" />
        </div>
        <div>
            <h1>滑动</h1>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.slidDown()</h2>
        <p>用滑动动画显示一个匹配元素</p>
        <div class="row">
            <div class="span6">
                <img src="./img/图片54.png" />
                <img src="./img2/图片58.png" />
            </div>
            <div class="span6">
                <p><strong>slideDown[Options选项]</strong></p>
                <img src="./img/图片55.png" />
                <img src="./img/图片56.png" />
                <img src="./img/图片57.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.slideToggle()</h2>
        <p>用滑动动画显示或隐藏一个匹配元素</p>
        <div class="row">
            <div class="span6">
                <p><strong>slideToggle（注：slideToggle选项同slideDown选项）</strong></p>
                <img src="./img/图片59.png" />
                <img src="./img/图片62.png" />
                <p>效果如下：</p>
                <img src="./img/图片63.png" />
            </div>
            <div class="span6">
                <img src="./img/图片60.png" />
                <p>效果如下：</p>
                <img src="./img/图片61.png" />
            </div>
        </div>
        <div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;" />
        </div>
        <h2>.slideUp()</h2>
        <p>用滑动动画或隐藏一个匹配元素</p>
        <div class="row">
            <div class="span6">
                <p><strong>slideUp（注：slideUp选项同slideDown选项）</strong></p>
                <img src="./img/图片64.png" />
                <img src="./img/图片65.png" />
                <p>效果如下：</p>
                <img src="./img/图片66.png" />
            </div>
            <div class="span6">
                <img src="./img/图片67.png" />
                <p>效果如下：</p>
                <img src="./img/图片68.png" />
            </div>
        </div>
    </div>
</div>
</body>
</html>